<template>
    <div class="app">
        <div class="title">
          <div class="logo">
            <img :src="require('assets/logo.png')"/>
          </div>
          <div class="title-text">
            <h2>狗眼看电影</h2>
            <p>查影讯，上狗眼电影就够了！</p>
          </div>
          <div class="search">
            <input type="text" placeholder="请输入电影名" @click="gotoSearch"/>
          </div>
        </div>
        <div class="link clearfix">
          <a class="isShowing" @click="isShowing = true">正在热映</a>
          <a class="willShow" @click = "isShowing = false">即将热映</a>
          <b class="border" :class="{pos: !isShowing}"></b>
        </div>
        <div class="content">
            <drop-loader key="inTheaters" v-if="isShowing" :loadDown = 'getInTheaters'>
                <template scope="props">
                    <item :movie="props.item"></item>
                </template>
            </drop-loader>
            <drop-loader key="commingSoon" v-if="!isShowing" :loadDown = 'getCommingSoon'>
                <template scope="props">
                    <item :movie="props.item"></item>
                </template>
            </drop-loader>
        </div>
    </div>
</template>

<script>
    import dropLoader from './DropLoader'
    import item from './Item.vue'
    import {getInTheaters, getCommingSoon} from 'src/api/index.js'

export default {
    components:{'drop-loader': dropLoader, item},
   data:function () {
       return {
           isShowing: true,
           getInTheaters: getInTheaters,
           getCommingSoon: getCommingSoon
       }
   },
    methods: {
        gotoSearch:function () {
            this.$router.push('search')
        }
    }
}
</script>

<style lang="scss" scoped="">
  .app{
    font-family: 'FontAwesome', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-color: #fff;
    color: #2c3e50;

      position: fixed;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
  }

  .title{
    background-color: #E5E9F2;
    position: relative;
    .logo{
      width: 42px;
      height: 42px;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 10px;
      margin: auto;

      img{
        max-width: 100%;
        max-height: 100%;
      }
    }
    .title-text{
      margin-left: 60px;
      margin-right: 11em;
      padding: 10px 0;

      h2{
        font-size: 17px;
        font-weight: 700;
        color: #333;
      }
      p{
        font-size: 12px;
        color: #999;
      }
    }
    .search{
      width: 110px;
      height: 40px;
      position: absolute;
      top: 0;
      bottom: 0;
      right: 10px;
      margin: auto;

      input{
        height: 100%;
        width: 100%;
        border: none;
        background-color: #fff;
        border-radius: 40px;

        font-size: 12px;
        text-align: center;
      }
    }
  }
  .link{
    text-align: center;
    font-size: 20px;
    position: relative;

    a{
      display: inline-block;
      line-height: 35px;
      width: 50%;
      background-color: #df2d2d;
      color: #F9FAFC;

      text-decoration: none;
    }
    .isShowing{
      float: left;
    }
    .willShow{
      float: right;
    }
  }

  .content{
      position: fixed;
      left: 0;
      right: 0;
      top: 108px;
      bottom: 0;

      padding: 0 20px;
  }

  .border {
    position: absolute;
    bottom: -1px;
    left: 0;
    z-index: 5;
    width: 50%;
    height: 4px;
    background: #ccc;
    -ms-transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    -webkit-transform: scale(.5);
    transform: scale(.5);
  }
  .pos{
    left: 50%;
  }


  .clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}
</style>
